import React, { useEffect, useState } from 'react';
import { useNavigate, useSearchParams } from 'react-router-dom';
import './ServicePackDetail.scss';
import { searchOneServePack,editPackStatus } from '../../../../../api/Service';
import Header from '../../../../../component/Serve/Header/Header';
import { Table,Button } from 'antd';
import type { ColumnsType } from 'antd/es/table';
interface Props {}
interface DataType {
    id:any,
    name:string,
    count:string,
    type:string,
    price:string,
    info:string
}
function ServiceDetail(props: Props) {
    var navigate = useNavigate();
    //获取查询字符串参数
    var [params, setParams] = useSearchParams()
    var [data, setData] = useState<any>({});//页面数据
    //挂载期
    useEffect(() => {
        getDetail() 
    }, [])
    //根据传过来的参数id获取服务包信息
    var getDetail = async () => {
        var res = await searchOneServePack({ id: params.get('packid') })
        console.log(res);
        if (res.status == 200) {
            setData(res.data)
        }
    }
    //表格
    const columns: ColumnsType<DataType> = [
        {
            title: '项目编号',
            dataIndex: 'id',
            key: 'id',
            render: (text) => <a>{text}</a>,
        },
        {
            title: '项目名称',
            dataIndex: 'name',
            key: 'name',
        },
        {
            title: '次数',
            dataIndex: 'count',
            key: 'count',
        },
        {
            title: '项目类型',
            key: 'type',
            dataIndex: 'type',
        },
        {
            title: '项目介绍',
            dataIndex: 'info',
            key: 'info',
        },
    ];
    //修改包状态
    var editStatus = async (str:any)=>{
        var res = await editPackStatus({id:1,packStatus:str})
        if(res.status==200){
            setData(res.data)
        }
    }
    return (
        <div className='servicedetail'>
            <div className="main">
                <Header txt="服务包详情" />
                <div className="text">
                    <img src={data.img} alt="" />
                    <div className="text-right">
                        <h2>{data.packName}<span>{data.packType}</span></h2>
                        <div className="price"><p>订购价格</p> <span>{data.packPrice}</span></div>
                        <div className="tags"><p>标签</p> <span>{data.packTags}</span></div>
                        <div className="user"><p>服务对象</p> <span>{data.packUser}</span></div>
                        <div className="time"><p>服务周期</p> <span>{data.packPeriod}</span></div>
                        <div className="info"><p>服务介绍</p> <span>{data.packInfo}</span></div>
                    </div>
                </div>
                <div className="table">
                    <h3>服务项目</h3>
                    <Table columns={columns} dataSource={data.packList} />
                </div>
                <div className="btn">
                    {
                        data.packStatus=="待审核"?
                        <>
                        <Button type="primary" style={{background:"#3DD4A7"}} onClick={()=>{editStatus('已启用')}}>审核通过</Button>
                        <Button type="primary" danger  onClick={()=>{editStatus('已驳回')}}>驳回</Button>
                        </>:
                        <></>
                    }
                    {
                        data.packStatus=="已启用"?
                        <Button type="primary" danger  onClick={()=>{editStatus('已停用')}}>停用</Button>:
                        <></>
                    }
                    {
                        data.packStatus=="已停用"?
                        <Button type="primary"  style={{background:"#3DD4A7"}}  onClick={()=>{editStatus('已启用')}}>启用</Button>:
                        <></>
                    }
                    <Button onClick={()=>{navigate(-1)}}>返回</Button>
                </div>
            </div>
        </div>
    );
}

export default ServiceDetail;